<template>
  <div class="home">
    <div class="header_box"></div>
    <div class="content">
      <div class="logoBox">
        <img src="static/img/logo.png" alt="">
        <div class="logoName">找到没</div>
      </div>
      <div class="phoneBox">
        <img class="phone" src="static/img/index-phone.png" alt="">
        <div class="downloadBox downCode">
          <img src="static/img/erweicode.png" alt="">
        </div>
        <div class="downloadBox">
          <div class="downP downTxt">扫描下载APP</div>
          <div class="downP downBtn" :class="{downBtnOk:'android'==isHover}" @mouseenter="downBtnEnter('android')" @mouseleave="downBtnLeave('android')" @click="download('android')">安卓下载</div>
          <div class="downP downBtn" :class="{downBtnOk:'ios'==isHover}" @mouseenter="downBtnEnter('ios')" @mouseleave="downBtnLeave('ios')"  @click="download('ios')">IOS下载</div>
        </div>
      </div>
      <div class="contentTxt">
        <div class="txtRight">
          <p class="title">一款免费的大学生生活服务平台</p>
          <p class="txtContent">如果你有才艺,有闲置物,有闲置时间,可以在这里创业获得现金酬劳,基于 <br> LBS同城,同校交易更加便捷,同学间更加放心。</p>
        </div>
      </div>
      <sort></sort>
     </div> 
    <nav-footer></nav-footer>
  </div>
  
</template>

<script>
import NavFooter from "@/components/NavFooter";
import Sort from "@/components/Sort"
export default {
  name: "home",
  data() {
    return {
      isHover:false
    };
  },
  mounted() {
  },
  methods: {
    download(type){
      console.log(type);
      if(type=='android'){
         window.open('http://zhushou.360.cn/detail/index/soft_id/3929131');
      }else if(type='ios'){
        window.open('https://itunes.apple.com/cn/app/shun-dai-biao-shi/id1319800704?mt=8');
      };
    },
    downBtnEnter(type){
      type=='android'?this.isHover = 'android':this.isHover = 'ios';
    },
    downBtnLeave(){
      this.isHover = false;
    }
  },
  components: {
    NavFooter,
    Sort
  }
};
</script>
<style>
.home {
  position: relative;
}
.header_box {
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('/static/img/banner.png');
  background-repeat: no-repeat;
  padding-top: 22px;
  box-sizing: border-box;
  z-index: -1;
}
.home .content {
  width: 1100px;
  margin: 0 auto;
  z-index: 999;
  padding-top:22px; 
  position: relative;
}
.logoBox  {
  height: 50px;
  font-size: 16px;
  color: #fff;
 }
.logoBox img {
  float: left;
}
.logoBox .logoName {
  float: left;
  line-height: 50px;
  margin-left:10px; 
}
.content .phoneBox {
  width: 100%;
  margin-top:100px; 
}
.phoneBox .phone {
  display: inline-block;
  width: 350px;
  margin: 0 50px;
}
.phoneBox .downloadBox {
  width: 220px;
  height: 220px;
  display: inline-block;
  margin: 190px 50px;
  float: right;
  text-align: center;
  font-size: 20px;
  position: relative;
}
.downloadBox .downP {
  line-height: 45px;
  margin: 20px 0;
}
.downloadBox .downBtn {
	background:url('/static/img/btn-click.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 25px;
  cursor: pointer;
}
.downloadBox .downBtnOk {
	background:url('/static/img/btn-unclick.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 25px;
  cursor: pointer;
  color: rgb(254,254,254)
}
.downloadBox .downTxt {
  color: #fff;
}
.downCode img{
  width: 100%;
}
.contentTxt {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 650px;
}
.contentTxt .txtRight {
  width: 60%;
  height: 100%;
  float: right;
  text-align: center;
}
.txtRight .title {
  color: rgb(51,51,51);
  font-size: 20px;
  margin: 10px 10px 30px 10px;
}
.txtRight .txtContent {
  color: rgb(102,102,102);
  font-size: 18px;
  margin: 10px 10px 20px 10px;
  line-height: 25px;
}
 
</style>
